<div id="gameContainer"></div>
<!-- Declare a JsRender template, in a script block: -->
<script id="gameTmpl" type="text/x-jsrender">
  {{for}}
    <div class="title bg bgco1 rnd5">
      <h1 id="game-title">{{:name}}</h1>
    </div>

      <ul id="content" class="pstgms lstli">
        {{for list}}
       <li class="post">
          <article class="pstcnt bgco1 rnd5">
             <figure class="rnd5">
               <a href="game.html?id={{:Id}}">
             <img
               src="{{:cover}}"
               data-src="{{:cover}}"
               width="100"
               height="100"
               alt="{{:name}}"
           /></a>
         </figure>
         <header>
           <h2>
             <a href="game.html?id={{:Id}}"
               >{{:name}}</a
             >
           </h2>
           <a
             class="iconb-game"
             href="game.html?id={{:Id}}"
             title="Play"
             ><span>Play</span></a
           >
         </header>
       </article>
     </li>
     {{/for}}
    </ul>
  {{/for}}
</script>

<script>
  $.ajax({
    url:
      "https://app.nocodb.com/api/v2/tables/mg01furv08tboqh/records?viewId=vwkcjs6aeek51qs1&" +
      window.gamelistParam,
    type: "GET",
    dataType: "json",
    headers: {
      "xc-token": "dePwLQ88UMbt4O9ndpBSQ-6RUC_nIhhpPea_0kTR",
    },
    contentType: "application/json; charset=utf-8",
    success: function (gameData) {
      // item Template
      let gameTmpl = $.templates("#gameTmpl");
      let gameList = {},
        list = [];

      gameData.list.map(item => {
        gameList[item.tag] = gameList[item.tag]
          ? [...gameList[item.tag], item]
          : [item];
      });

      list = Object.entries(gameList).map(([key, value]) => ({
        name: key,
        list: value,
      }));
      console.log(list);
      let gameHtml = gameTmpl.render(list);
      $("#gameContainer").html(gameHtml);
    },
    error: function (error) {
      console.error(error);
    },
  });
</script>
